<template>
  <div class="BlogContent-content" ref="wrap" v-loading="isLoading">
    <ul v-if="data.total">
      <li v-for="item in data.rows" :key="item.id">
        <div v-if="item.thumb" class="left">
          <RouterLink
            :to="{
              name: 'BlogDetail',
              params: {
                blogId: item.id,
              },
            }"
          >
            <img v-lazy="item.thumb" />
          </RouterLink>
        </div>
        <div class="right">
          <RouterLink
            :to="{
              name: 'BlogDetail',
              params: {
                blogId: item.id,
              },
            }"
          >
            <h3>{{ item.title }}</h3>
          </RouterLink>
          <div class="info">
            <span>浏览量：{{ item.scanNumber }}</span>
            <span>创建日期：{{ getStringDate(item.createDate) }}</span>
            <span>评论量：{{ item.commentNumber }}</span>
            <span>
              <RouterLink
                :to="{
                  name: 'BlogType',
                  params: {
                    cateId: item.category.id,
                  },
                }"
                >{{ item.category.name }}</RouterLink
              >
            </span>
          </div>
          <div class="desc">{{ item.description }}</div>
        </div>
      </li>
    </ul>
    <Empty v-if="isLoading && !data.total" />
    <div class="page">
      <Page
        v-if="data.total"
        :current="current"
        :limit="limit"
        :total="data.total"
        @changePage="handleClick"
      />
    </div>
  </div>
</template>

<script>
import featchData from "@/mixins/fetchData.js";
import handleScroll from "@/mixins/handleScroll.js";
import Page from "@/components/Page";
import { getBlogList } from "@/api/blog.js";
import { getStringDate } from "@/utils";
import Empty from "@/components/Empty";
export default {
  mixins: [featchData([]), handleScroll("wrap")],
  components: {
    Page,
    Empty,
  },
  data() {
    return {};
  },
  computed: {
    // 当前路由下的分类
    cate() {
      return +this.$route.params.cateId || -1;
    },
    // 当前路由下的数据数量
    limit() {
      return +this.$route.query.limit || 15;
    },
    // 当前路由下的页码
    current() {
      return +this.$route.query.current || 1;
    },
  },
  methods: {
    // 根据计算属性请求数据
    async fetchData() {
      let data = await getBlogList(this.current, this.limit, this.cate);
      // 请求不到数据，则跳转 404 页面
      if (!data) {
        this.$router.push({
          name: "404",
        });
        return;
      }
      return data;
    },
    // 点击页码的时候，更换路由
    async handleClick(current) {
      // 点击页码切换路由
      let cateId = this.$route.params.cateId || -1;

      if (cateId === -1) {
        // cateId 为 -1 时切换回 blog 路由
        this.$router.push({
          name: "Blog",
          query: {
            current,
            limit: this.limit,
          },
        });
      } else {
        // cataId 不为 -1 时切换分类路由 blogType
        this.$router.push({
          name: "BlogType",
          query: {
            current,
            limit: this.limit,
          },
          params: {
            cateId,
          },
        });
      }
    },
    getStringDate,
  },
  watch: {
    async $route() {
      // 根据路由信息变换来请求渲染数据

      this.isLoading = false;
      this.$refs.wrap.scrollTo(0, 0);
      if (this.$route.name === "Blog" || this.$route.name === "BlogType") {
        // 如果请求的是文章列表数据则请求 getBlogList
        this.data = await getBlogList(this.current, this.limit, this.cate);
      } else if (this.$route.params.blogId) {
        // 如果请求的是文章详情，则请求 getBlogDetail
      }
      this.isLoading = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import url(~@/style/var.less);
.BlogContent-content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: flex;
      margin-top: 15px;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 3px 10px rgb(112, 112, 112);
      .left {
        margin-right: 10px;
        img {
          display: block;
          width: 150px;
        }
      }
      .right {
        a {
          text-decoration: none;
          color: @dark;
          &:hover {
            color: @primary;
          }
        }
        h3 {
          margin: 0;
          padding: 0px;
          padding-bottom: 6px;
          font-size: 1.4em;
          letter-spacing: 4px;
        }
        .info {
          color: @gray;
          font-size: 12px;
          padding-bottom: 3px;
          span {
            margin: 5px;
          }
          a {
            color: @gray;
            &:hover {
              color: #f1951c;
            }
          }
        }
        .desc {
          color: rgb(90, 90, 90);
          font-size: 14px;
          letter-spacing: 2px;
        }
      }
    }
  }
  .page {
    margin: 30px 0;
  }
}
</style>